/**
 * 异步组件工具
 * @description 提供Vue异步组件的创建工具，支持加载状态、错误处理、重试机制等功能
 * @author 系统开发团队
 * @version 1.0.0
 */

import { defineAsyncComponent } from 'vue'
import LoadingSpinner from '../components/LoadingSpinner.vue'

/**
 * 创建异步组件
 * @description 创建一个带有加载状态和错误处理的异步组件，支持自动重试机制
 * @param {Function} loader 组件加载函数，返回Promise
 * @param {string} loadingText 加载时显示的文本，默认为'页面加载中...'
 * @returns {Component} Vue异步组件
 * @example
 * // 创建异步组件
 * const AsyncUserProfile = createAsyncComponent(
 *   () => import('../views/UserProfile.vue'),
 *   '用户信息加载中...'
 * )
 * 
 * // 在模板中使用
 * <AsyncUserProfile />
 */
export function createAsyncComponent(
  loader: () => Promise<any>,
  loadingText: string = '页面加载中...'
) {
  return defineAsyncComponent({
    // 组件加载函数
    loader,
    
    // 加载时显示的组件
    loadingComponent: LoadingSpinner,
    
    // 延迟显示加载组件的时间（毫秒）
    delay: 100,
    
    // 加载超时时间（毫秒）
    timeout: 10000,
    
    // 错误时显示的组件
    errorComponent: {
      template: `
        <div class="error-container">
          <div class="error-content">
            <h3>加载失败</h3>
            <p>页面加载超时，请刷新重试</p>
            <button @click="$router.go(0)" class="retry-btn">重新加载</button>
          </div>
        </div>
      `,
      styles: `
        .error-container {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 200px;
          width: 100%;
        }
        .error-content {
          text-align: center;
          color: #6b7280;
        }
        .retry-btn {
          background: #6366f1;
          color: white;
          border: none;
          padding: 8px 16px;
          border-radius: 4px;
          cursor: pointer;
          margin-top: 16px;
        }
        .retry-btn:hover {
          background: #4f46e5;
        }
      `
    },
    
    /**
     * 错误处理函数
     * @description 当组件加载失败时的处理逻辑，支持自动重试
     * @param {Error} error 错误对象
     * @param {Function} retry 重试函数
     * @param {Function} fail 失败处理函数
     * @param {number} attempts 当前尝试次数
     */
    onError(error: Error, retry: Function, fail: Function, attempts: number) {
      console.error('组件加载失败:', error)
      
      // 最多重试3次
      if (attempts <= 3) {
        console.log(`第${attempts}次重试加载组件...`)
        retry()
      } else {
        console.error('组件加载失败，已达到最大重试次数')
        fail()
      }
    }
  })
} 